<template>
  <el-header id="header">
    <span class="hideAside" @click="collapse"><i class="fa fa-indent fa-lg"></i>切换</span>

    <ul class="personal">
      <li>
        <img src="http://121.36.172.205//userImg/yhtx08.png" alt="">
      </li>
      <li>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-linkdd">
            ssssssssss
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info">基本信息</el-dropdown-item>
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="xx">我的工作台</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>

      <li>
        <el-switch
          v-model="isMuted" 
          @change="changeMuted"
          active-text="禁用播放"
          inactive-text="开启播放"
        />
      </li>
    </ul>
 
    <div style="display: none;">
      <audio ref="newBookAudio" muted>
        <source src="./../assets/mp3/newBook.mp3" type="audio/mp3" />
      </audio>
      <audio ref="cancelBookAudio" muted>
        <source src="./../assets/mp3/cancelBook.mp3" type="audio/mp3" />
      </audio>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";


import { useSystemStore } from '@/stores/system'
const systemStore = useSystemStore();
import { onBeforeUnmount } from 'vue';
import { ElNotification } from 'element-plus'

const router = useRouter();

const isMuted=ref(true);

//相当于引用<audio ref="newBookAudio"
const newBookAudio = ref(null);
//相当于引用<audio ref="cancelBookAudio"
const cancelBookAudio = ref(null);
 
 
const changeMuted = ()=>{
  newBookAudio.value.muted=isMuted.value;
  cancelBookAudio.value.muted=isMuted.value; 
}

//websocket对象  
let websocket: WebSocket | null = null;
 
let clientId = 110;

const collapse = () => {
  systemStore.toggleCollapse();
}

const notifyMsg = (msg: string, title: string = "提示") => {
  ElNotification({
    title: title,
    message: msg,
    type: 'info',
  })
}

 

const initWebSocket = () => {
  if (typeof (WebSocket) == "undefined") {
    notifyMsg("当前浏览器不支持WebSocket");
  } else {
    websocket = new WebSocket("ws://localhost/ws/" + clientId);

    // 监听webSocket打开
    websocket.onopen = function () {
      console.log('浏览器WebSocket已打开') 
    }
    // 监听webSocket消息接收
    websocket.onmessage = function (msg) {
      let receiveMsg = msg.data;
      console.log(msg);
      if(receiveMsg){
        receiveMsg = JSON.parse(receiveMsg); //将json字符串变成json对象
      }else{
        return;
      }
   
      //响应{type:createBook,num:订单编号} || {type:cancelBook,num:订单编号}
      if (newBookAudio.value == null || cancelBookAudio.value == null) {
        return;
      }

      console.log(receiveMsg);
      if (receiveMsg.type == "createBook") {  
        newBookAudio.value.currentTime=0;
        newBookAudio.value.play();  
        notifyMsg(receiveMsg.num+"新订单"); 
      } else if (receiveMsg.type == "cancelBook") {
        cancelBookAudio.value.currentTime=0;
        cancelBookAudio.value.play();
        notifyMsg(receiveMsg.num+"订单取消了");
      }
    }
    // 监听webSocket错误
    websocket.onerror = function () {
      console.log('监听socket错误')
    }
    // 监听webSocket关闭
    websocket.onclose = function () {
      console.log('WebSocket已关闭')
    }
  }
}

//初始化WebSocket对象
initWebSocket();

const handleCommand = (command: string) => {
  if ("logout" == command) {
    sessionStorage.removeItem("token");
    sessionStorage.removeItem("userInfo")

    //store.commit("logout"); //vuex

    //跳转到登录界面
    router.push("/login");
  } else if ("editPassword" == command) {
    //TODO
  }
}


onBeforeUnmount(() => {
  if (websocket != null) {
    websocket.close();
  }
})
</script>

<style scoped>
#header .personal .el-dropdown-link,
#header .hideAside {
  cursor: pointer;
}

#header {
  max-height: 50px;
  line-height: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

#header .personal {
  display: flex;
  flex-direction: row;
  align-content: center;
}

#header .personal li {
  margin-left: 13px;
  margin-right: 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
}


#header .personal li img {
  width: 40px;
  border-radius: 50%;
}
</style>
